<template>
  <el-dialog title="钱包基本信息详情" :close-on-click-modal="false" :visible.sync="messageShow" class="view">
    <div class="mod-config" >
      <div style="padding: 10px 40px;margin-bottom: 25px;">
        <el-row :gutter="20">
          <el-col :span="8">昵称</el-col>
          <el-col :span="16">{{ dataInfo.nickname }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">uid</el-col>
          <el-col :span="16">{{ dataInfo.userId }}</el-col>
        </el-row>
        <el-row :gutter="20" style="display: flex;align-items: center">
          <el-col :span="8">头像</el-col>
          <el-col :span="16">
            <img :src="dataInfo.avatar" alt="" style="width: 40px;height: 40px;">
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">手机号</el-col>
          <el-col :span="16">{{ dataInfo.phone }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">会员身份</el-col>
          <el-col :span="16">{{ dataInfo.grade === 1?'会员':dataInfo.grade === 2?'经理':'总监' }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">账户余额</el-col>
          <el-col :span="16">{{ dataInfo.balance }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">可提现余额</el-col>
          <el-col :span="16">{{ dataInfo.availBalance }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">冻结金额</el-col>
          <el-col :span="16">{{ dataInfo.blockedBalance }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">解冻金额</el-col>
          <el-col :span="16">{{ dataInfo.unblockedBalance }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">本月服务系数</el-col>
          <el-col :span="16"><el-input v-model="walletVO.ratio" placeholder="可修改"></el-input></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">备注</el-col>
          <el-col :span="16"><el-input v-model="walletVO.remarks" placeholder="可修改"></el-input></el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="messageShow = false">取消</el-button>
      <el-button type="primary" @click="updateData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        messageShow: false,
        dataInfo: {},
        dataListLoading: false,
        walletVO: {}
      };
    },
    methods: {
      init (id) {
        this.walletVO = {}
        this.messageShow = true
        this.$http({
          url: this.$http.adornUrl(`/account/saleAccount/info/${id}`),
          method: "get",
        }).then(({ data }) => {
          this.dataInfo = data.WalletVO
          if (data.WalletVO.ratio) {
            this.walletVO.ratio = data.WalletVO.ratio
          }
          if (data.WalletVO.remarks) {
            this.walletVO.remarks = data.WalletVO.remarks
          }
        })
      },
      updateData () {
        if (this.walletVO.ratio) {
          this.walletVO.userId = this.dataInfo.userId
          let data = this.walletVO
          this.$http({
            url: this.$http.adornUrl(`/account/saleAccount/update`),
            method: "post",
            data
          }).then(({ data }) => {
            if (data.code === 0) {
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.messageShow = false
                  this.$emit('refreshDataList')
                }
              })
            }
          })
        } else {
          this.$message({
            message: "请填写本月服务系数",
            type: "error"
          });
        }
      }
    }
  };
</script>
<style scoped>
  .el-row{
    font-size: 16px;
    margin: 15px 0;
  }
  .cencontent{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .colcontent{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #f2f2f2;
    width: 31.8%;
    margin-bottom: 25px;
    padding: 15px 15px 5px 15px;
  }
  .title{
    font-size: 17px;
    font-weight: 600;
  }
  .titlefu{
    font-size: 14px;
    margin-top: 18px;
  }
  .cencontent .el-row{
    font-size: 12px;
    margin: 10px 0;
  }
</style>
